/**
 * Created by fandongyang on 2017/7/26.
 */
import React, {Component} from 'react';
import {Dimensions, View, StyleSheet, ScrollView, Text,} from 'react-native' ;
import Icon from 'react-native-vector-icons/MaterialIcons';
import Carousel from 'react-native-snap-carousel';
import I18n, {getLanguages} from 'react-native-i18n';
import {ENTRIES1, ENTRIES2} from '../../static/entries';
import {sliderWidth, itemWidth} from '../../styles/SliderEntry.style';
import SliderEntry from '../../components/SliderEntry';
import {Button} from 'native-base';

const {width, height} = Dimensions.get('window');

I18n.fallbacks = true;

// Available languages
I18n.translations = {
    'en': require('./translations/en'),
    'fr': require('./translations/fr'),
    'fr-CA': require('./translations/fr-CA'),
    'es': require('./translations/es'),
    'zh-CN': require('./translations/zh-CN'),

};

console.log(I18n.locales)

class Index extends Component {
    // 默认属性
    static defaultProps = {};

    // 属性类型
    static propTypes = {};

    state = {languages: []}

    componentWillMount() {
        getLanguages().then(languages => {
            this.setState({languages})
        })
    }

    _onPressButtonRegister = () => {
        this.props.navigation.navigate('Register', {title: '注册'})
    }
    _onPressButtonLogin = () => {
        this.props.navigation.navigate('Login', {title: '登录', isVisible: false})
    }
    _changeLanguage = () => {
        const {languages} = this.state;
        if (languages === 'zh-CN') {
            I18n.locale = "en";
            this.setState({
                languages: 'en'
            })
        } else if (languages === 'en') {
            I18n.locale = "fr-CA";
            this.setState({
                languages: 'fr-CA'
            })
        } else {
            I18n.locale = "zh-CN";
            this.setState({
                languages: 'zh-CN'
            })
        }

    }

    getSlides(entries) {
        if (!entries) {
            return false;
        }

        return entries.map((entry, index) => {
            return (
                <SliderEntry
                    key={`carousel-entry-${index}`}
                    even={(index + 1) % 2 === 0}
                    {...entry}
                />
            );
        });
    }

    get example1() {
        return (
            <Carousel
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                firstItem={1}
                autoplay={true}
                inactiveSlideScale={0.94}
                inactiveSlideOpacity={0.6}
                enableMomentum={false}
                containerCustomStyle={styles.slider}
                contentContainerCustomStyle={styles.sliderContainer}
                showsHorizontalScrollIndicator={false}
                snapOnAndroid={true}
                removeClippedSubviews={false}
            >
                {this.getSlides(ENTRIES1)}
            </Carousel>
        );
    }

    get example2() {
        return (
            <Carousel
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                inactiveSlideScale={1}
                inactiveSlideOpacity={1}
                enableMomentum={true}
                autoplay={true}
                autoplayDelay={1000}
                autoplayInterval={2500}
                containerCustomStyle={styles.slider}
                contentContainerCustomStyle={styles.sliderContainer}
                showsHorizontalScrollIndicator={false}
                snapOnAndroid={true}
                removeClippedSubviews={false}
            >
                {this.getSlides(ENTRIES2)}
            </Carousel>
        );
    }

    // 渲染
    render() {

        return (
            <View style={styles.defaultView}>

                <View style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    backgroundColor: "#2E353D",
                    height: 50,
                    alignItems: 'center',
                    paddingHorizontal: 20,
                    paddingTop: 0
                }}>
                    <Icon name="person" size={25}
                          color='transparent'/>
                    <Text style={{color: 'white', fontSize: FONT_SIZE(20)}}>探索</Text>
                    <Icon name="search" size={25}
                          color='white'/>

                </View>

                <ScrollView
                    style={styles.scrollview}
                    indicatorStyle={'white'}
                    scrollEventThrottle={200}
                >
                    <View style={{height: 8}}/>
                    {this.example1}

                    {/*  {this.example2}*/}


                    {/*  <View style={styles.line}>
                        <Text style={styles.label}>getLanguages (Promise): </Text>
                        <Text>{JSON.stringify(this.state.languages)}</Text>
                    </View>*/}

                    {/*
                    <View style={styles.line}>
                        <Text style={styles.label}>I18n.t('hello world'): </Text>
                        <Text>{I18n.t('hello world')}</Text>
                    </View>
                    <Button block onPress={this._changeLanguage}><Text>_ChangeLanguage</Text></Button>*/}

                    <Button block onPress={this._onPressButtonRegister}><Text>TestNodeAPI</Text></Button>

                </ScrollView>

            </View>
        )

    }

}

let styles = StyleSheet.create({
    defaultView: {
        flex: 1
    },
    title: {
        fontSize: 20,
        fontWeight: '700',
        marginBottom: 8,
    },
    line: {
        flexDirection: 'row',
        marginBottom: 16,
    },
    label: {
        fontWeight: '700',
        marginRight: 8,
    },
})

export default Index;
